<template>
  <div class="page-miH page-bgBack">
    <rTitle :type="'center'" tit="人才智能推荐" />
    <div class="p24">
      <div class="flex-center">
        <div class="fs16 fw500">智能推荐岗位：</div>
        <a-select
          v-model="intentionJob"
          :options="gangweiList"
          :filterOption="filterOption"
          showSearch
          allowClear
          placeholder="请选择意向岗位"
          style="width: 200px"
          @change="onGangweiSearch"
        />
      </div>
      <div class="mt12 flex-center">
        <div class="fs16 fw500">智能推荐职位类型：</div>
        <a-cascader
          v-model="positionType"
          disabled
          :options="positionTypes"
          :fieldNames="{ label: 'name', value: 'id', children: 'childList' }"
          placeholder="职位类型"
          class="mr24"
          style="width: 300px"
        />
      </div>
      <div class="mt12 flex-center">
        <div class="fs16 fw500">全部筛选项：</div>
        <a-button type="link" @click="init">
          <a-icon type="reload" />
          重置
        </a-button>
      </div>
    </div>
    <div class="r-talent-box">
      <div class="xq-form-wrapper">
        <a-row :gutter="16">
          <a-col :span="4">
            <a-input
              v-model="jobSeekerNameOrPhone"
              placeholder="姓名/手机号搜索"
              style="width: 100%"
              allowClear
              @change="debouncedSearch"
            />
          </a-col>
          <a-col :span="4">
            <a-select label="性别" allow-clear v-model="gender" placeholder="请选择性别" style="width: 100%" @change="onSearch">
              <a-select-option value="男">男</a-select-option>
              <a-select-option value="女">女</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="4">
            <a-select
              label="在职状态"
              allow-clear
              v-model="serviceStatus"
              placeholder="请选择在职状态"
              style="width: 100%"
              @change="onSearch"
            >
              <a-select-option value="在职">在职</a-select-option>
              <a-select-option value="未在职">未在职</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="5">
            <city
              :defaultValue="addressCode"
              :level="2"
              placeholder="工作城市"
              style="width: 100%; min-width: auto"
              @change="onCityChange"
            />
          </a-col>
          <a-col :span="7">
            <a-input-group compact>
              <a-input v-model="ageStart" style="width: 110px; text-align: center" placeholder="最小年龄" @change="debouncedSearch" />
              <a-input style="width: 32px; border-left: 0; pointer-events: none; backgroundcolor: #fff" placeholder="~" disabled />
              <a-input
                v-model="ageEnd"
                style="width: 110px; text-align: center; border-left: 0"
                placeholder="最大年龄"
                @change="debouncedSearch"
              />
            </a-input-group>
          </a-col>
        </a-row>
        <div class="mt24 fs14" style="display: flex; font-weight: 40; color: #636363">
          <div>工作经验：</div>
          <div
            v-for="(item, index) in experienceList"
            :key="index"
            :class="colHighlighted === index ? 'colpri' : ''"
            style="margin-left: 20px; cursor: pointer"
            @click="experienceChange(item, index)"
          >
            {{ item.label }}
          </div>
          <div style="margin-left: 20px" class="custom1" :class="colHighlighted === 5 ? 'colpri' : ''" @click="zdy">自定义</div>
          <div style="display: flex" v-if="isCustom">
            <a-input-number :min="0" v-model="startYear" placeholder="请输入" style="width: 120px; margin-top: -4px; margin-left: 20px" />
            <div style="margin-left: 12px">-</div>
            <a-input-number
              :min="startYear || 0"
              v-model="endYear"
              placeholder="请输入"
              style="width: 120px; margin-top: -4px; margin-left: 12px"
            />
            <a-button type="link" @click="experienceChange()" style="margin-top: -4px">确认</a-button>
          </div>
        </div>
        <a-spin :spinning="spinning">
          <a-row v-if="tableData.length > 0" :gutter="16" class="mt24">
            <a-col v-for="record in tableData" :key="record.id" :span="8">
              <div class="table-item p12" @click="onInfo(record)">
                <div style="display: flex; align-items: center; justify-content: space-between">
                  <div style="display: flex; align-items: center">
                    <a-tooltip :title="record.jobSeekerName">
                      <span
                        class="fs16 fw500"
                        style="color: rgba(60, 61, 67, 1); width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
                      >
                        {{ record.jobSeekerName }}
                      </span>
                    </a-tooltip>
                    <a-space>
                      <span>{{ record.addressCode ? getAddressCode(record.addressCode) : "" }}</span>
                      <span v-if="record.addressCode">|</span>
                      <span>{{ record.sex ? (record.sex === "男" ? "男" : "女") : "" }}</span>
                      <span v-if="record.sex && record.birthday">|</span>
                      <span>{{
                        record.birthday ? (getBirthday(record.birthday) > 0 ? `${getBirthday(record.birthday)}岁` : "0岁") : ""
                      }}</span>
                    </a-space>
                  </div>
                  <div>
                    <a-icon type="phone" theme="filled" style="color: #bfbfbf" />
                    {{ record.phone }}
                  </div>
                </div>
                <div class="mt16 fs12">
                  <span>意向岗位：</span>
                  {{ record.intentionJob ? record.intentionJob.split("*")[1] : "" }}
                </div>
                <div class="mt12 fs12">
                  <span>工作经验：</span>
                  {{ record.workYears ? `${record.workYears}年` : "" }}
                </div>
                <div
                  v-if="record.serviceStatus === '在职'"
                  class="mt16 ph12 pv2 fs12"
                  style="display: inline-block; border-radius: 4px; color: rgba(247, 181, 0, 1); background: rgba(247, 181, 0, 0.1)"
                >
                  在职
                </div>
                <div
                  v-else
                  class="mt16 ph12 pv2 fs12"
                  style="display: inline-block; border-radius: 4px; color: rgba(109, 212, 0, 1); background: rgba(109, 212, 0, 0.1)"
                >
                  未在职
                </div>
                <div style="position: absolute; bottom: 16px; right: 16px">
                  <div>
                    <a-button size="small" type="primary" @click.stop="addRecord(record)">添加跟进</a-button>
                  </div>
                  <div class="mt8">
                    <a-button size="small" type="default" @click.stop="doInfo(record)">一键投递</a-button>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
          <div v-else class="ta-center pv32">
            <img src="./zanwushuju.png" style="width: 92px; height: 92px" alt="" />
            <div class="mt12">暂无数据</div>
            <div class="fs12 mt12" style="color: rgba(166, 168, 180, 1)">请先在上方选择需要智能推荐的岗位</div>
            <div class="fs12" style="color: rgba(166, 168, 180, 1)">或完善需要智能推荐岗位中的职位类型</div>
          </div>
          <div class="mt12" style="display: flex; align-items: center; justify-content: flex-end">
            <div class="mr12">共 {{ total }} 条</div>
            <a-pagination
              v-model="pageNo"
              :page-size="pageSize"
              :total="total"
              :show-quick-jumper="true"
              size="small"
              @change="onPageChange"
            />
          </div>
        </a-spin>
      </div>
    </div>
    <a-modal v-model="addVisible" title="添加跟进记录" @ok="onAddOk">
      <a-form-item required label="跟进人" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-select
          v-model="recordCur"
          :options="adminUsers"
          showSearch
          :filterOption="filterOption"
          placeholder="请选择跟进人"
          style="width: 100%"
        ></a-select>
      </a-form-item>
      <a-form-item required label="跟进方式" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-select v-model="recordMed" :options="followTypeList" placeholder="请选择跟进方式" style="width: 100%"></a-select>
      </a-form-item>
      <a-form-item required label="跟进内容" :labelCol="{ span: 7 }" :wrapperCol="{ span: 12 }">
        <a-textarea v-model="recordCon" placeholder="请填写跟进内容" style="width: 100%"></a-textarea>
      </a-form-item>
    </a-modal>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import moment from "moment";
import rTitle from "../../component/rTitle";
import { mapState } from "vuex";
import { AreaPicker as city } from "xqjr-plugin-common";
import { getTalentPoolInfoIntelligentRecommendationReq, getCompanyUnits, listAllByIsCancelGetListReq } from "./api";
import { followUpAddReq } from "../../api";
import { followTypeList } from "../../funcs";
export default {
  components: {
    rTitle,
    city
  },
  data() {
    return {
      addressCodeSort: undefined,
      ageStart: undefined,
      ageEnd: undefined,
      gangweiList: [],
      followTypeList,
      recordCur: undefined,
      recordMed: undefined,
      recordCon: "",
      tempRecord: null,
      addVisible: false,
      colHighlighted: 0,
      spinning: false,
      visible: false,
      isCustom: false,
      positionType: undefined,
      addressCode: undefined,
      columns: [
        {
          title: "名次",
          dataIndex: "name",
          scopedSlots: { customRender: "name" }
        }
      ],
      companyIdArr: [],
      tableData: [{ name: 1 }],
      jobSeekerNameOrPhone: "",
      gender: undefined,
      serviceStatus: undefined,
      experienceList: [
        { label: "不限", value1: undefined, value2: undefined },
        { label: "暂无工作经验", value1: 0, value2: 0 },
        { label: "1-3年", value1: 1, value2: 3 },
        { label: "3-5年", value1: 3, value2: 5 },
        { label: "5-10年", value1: 5, value2: 10 }
      ],
      endYear: undefined,
      startYear: undefined,
      companyUnitName: undefined,
      total: 0,
      intentionJob: undefined,
      pageNo: 1,
      pageSize: 9,
      mjson: {},
      talentPoolId: ""
    };
  },
  computed: {
    ...mapState(["common", "recruitment"]),
    adminUsers() {
      return this.recruitment.adminUsers;
    },
    positionTypes() {
      return this.recruitment.positionTypes;
    }
  },
  async created() {
    this.debouncedSearch = _.debounce(this.onSearch, 1000);
    this.onGetCompanyUnits();
    this.$store.commit("recruitment/talentPoolTempId", "");
    this.$store.commit("recruitment/isCancel", null);
    Cookies.set("sidebarStatus", 0);
    await listAllByIsCancelGetListReq({
      "orders[0].property": "gmtCreate",
      "orders[0].desc": true
    })
      .then((res) => {
        this.gangweiList = res.data.map((item) => ({
          item,
          value: item.id,
          label: item.postName
        }));
        if (this.gangweiList && this.gangweiList.length > 0) {
          this.intentionJob = this.gangweiList[0].value;
          this.positionType = this.gangweiList[0].item.positionType ? this.gangweiList[0].item.positionType.split(",") : undefined;
          this.addressCodeSort = this.gangweiList[0].item.cityName ? this.gangweiList[0].item.cityName.split(",")[0] : undefined;
        }
      })
      .catch((err) => {
        console.log("listAllByIsCancelGetListReq", err);
      });
    this.onGetTalentPoolInfo();
  },
  mounted() {},
  methods: {
    onCityChange({ value }) {
      this.addressCode = value.length > 0 ? value[value.length - 1] : undefined;
      this.pageNo = 1;
      this.onGetTalentPoolInfo();
    },
    onGangweiSearch(val, node) {
      if (node) {
        const item = node.data.props.item;
        this.positionType = item.positionType ? item.positionType.split(",") : undefined;
        this.addressCodeSort = item.cityName ? item.cityName.split(",")[0] : undefined;
      } else {
        this.positionType = undefined;
        this.addressCodeSort = undefined;
      }
      this.pageNo = 1;
      this.onGetTalentPoolInfo();
    },
    onAddOk() {
      if (this.recordCur && this.recordMed && this.recordCon) {
        followUpAddReq({
          talentPoolId: this.tempRecord.id,
          followUser: this.recordCur,
          followType: this.recordMed,
          followContent: this.recordCon
        })
          .then((res) => {
            this.$message.success("添加成功");
            this.addVisible = false;
          })
          .catch((err) => {
            console.log("followUpAddReq", err);
          });
      } else {
        this.$message.error("请填写完整信息");
      }
    },
    addRecord(record) {
      this.tempRecord = record;
      this.addVisible = true;
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    getBirthday(strBirthday) {
      var returnAge;
      var strBirthdayArr = strBirthday.split("-");
      var birthYear = strBirthdayArr[0];
      var birthMonth = strBirthdayArr[1];
      var birthDay = strBirthdayArr[2];
      var d = new Date();
      var nowYear = d.getFullYear();
      var nowMonth = d.getMonth() + 1;
      var nowDay = d.getDate();
      if (nowYear === birthYear) {
        returnAge = 0; // 同年 则为0周岁
      } else {
        var ageDiff = nowYear - birthYear; // 年之差
        if (ageDiff > 0) {
          if (nowMonth === birthMonth) {
            var dayDiff = nowDay - birthDay; // 日之差
            if (dayDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          } else {
            var monthDiff = nowMonth - birthMonth; // 月之差
            if (monthDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          }
        } else {
          returnAge = -1; // 返回-1 表示出生日期输入错误 晚于今天
        }
      }
      return returnAge; // 返回周岁年龄
    },
    getAddressCode(val) {
      if (val) {
        const arr = val.split(",");
        let city = "";
        let city1 = "";
        if (arr.length === 2) {
          this.common.cityList.map((z) => {
            if (z.id === Number(arr[0])) {
              city = z.name;
              city1 = z.children ? z.children.find((z) => z.id === Number(arr[1])).name : null;
            }
          });
          return `${city}${city1 || ""}`;
        } else {
          this.common.cityList.map((z) => {
            if (z.id === Number(arr[0])) {
              city = z.name;
            }
          });
          return `${city}`;
        }
      } else {
        return "";
      }
    },
    zdy() {
      this.startYear = null;
      this.endYear = null;
      this.isCustom = true;
      this.colHighlighted = 5;
      this.onSearch();
    },
    experienceChange(e, index) {
      if (e) {
        this.colHighlighted = index;
        this.startYear = e.value1;
        this.endYear = e.value2;
        this.isCustom = false;
      }
      this.onSearch();
    },
    moment,
    init() {
      this.jobSeekerNameOrPhone = "";
      // this.intentionJob = undefined;
      // this.positionType = undefined;
      this.addressCode = undefined;
      this.ageStart = undefined;
      this.ageEnd = undefined;
      this.gender = undefined;
      this.companyUnitName = undefined;
      this.serviceStatus = undefined;
      this.total = 0;
      this.pageNo = 1;
      this.onGetTalentPoolInfo();
    },
    async onGetTalentPoolInfo() {
      try {
        this.spinning = true;
        const { data } = await getTalentPoolInfoIntelligentRecommendationReq({
          jobSeekerNameOrPhone: this.jobSeekerNameOrPhone,
          intentionJob: this.positionType ? this.positionType[this.positionType.length - 1] : undefined,
          ageStart: this.ageStart,
          ageEnd: this.ageEnd,
          sex: this.gender ? this.gender : "",
          serviceStatus: this.serviceStatus ? this.serviceStatus : "",
          companyUnitName: this.companyUnitName,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          workYearsStart: this.startYear,
          workYearsEnd: this.endYear,
          addressCode: this.addressCode,
          addressCodeSort: this.addressCodeSort
        });
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        this.tableData = [];
        this.total = 0;
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetTalentPoolInfo();
    },
    async onGetCompanyUnits() {
      try {
        const { data } = await getCompanyUnits({
          pageNo: 1,
          pageSize: 1000
        });
        this.companyIdArr = data.entities;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    doInfo(e) {
      const query = {
        mode: "onekey"
      };
      if (e.talentPoolId) query.talentPoolId = e.talentPoolId;
      if (e.deliverRecordId) query.deliverRecordId = e.deliverRecordId;
      if (e.principalName) query.principalName = e.principalName;
      if (this.intentionJob) {
        query["intentionJob"] = this.intentionJob;
      }
      this.$router.push({
        name: "talentMsg",
        query
      });
    },
    onInfo(e) {
      const query = {};
      if (e.talentPoolId) query.talentPoolId = e.talentPoolId;
      if (e.deliverRecordId) query.deliverRecordId = e.deliverRecordId;
      if (e.principalName) query.principalName = e.principalName;
      this.$router.push({
        name: "talentMsg",
        query
      });
    },
    onSearch() {
      this.visible = false;
      this.pageNo = 1;
      this.onGetTalentPoolInfo();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .ant-table-tbody {
  tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) {
    td {
      background: #fff;
    }
  }
}
::v-deep .ant-table-row {
  td {
    padding: 0;
    border-bottom: none;
  }
}
.table-item {
  position: relative;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin-bottom: 16px;
  cursor: pointer;
}
.colpri {
  color: var(--primary);
}
.custom1 {
  cursor: pointer;
}
.entry {
  margin-right: 12px;
  background-color: var(--primary30);
}
.entry:hover {
  background-color: var(--primary30);
}
.r-talent-box {
  padding: 24px;
  padding-top: 0;
  .r-talent-action {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    .search-box {
      padding: 42px 24px 0 24px;
      input {
        width: 80%;
      }
      select {
        width: 80%;
      }
      .search-box-item {
        // margin-right: 24px;
        margin-bottom: 24px;
        p {
          color: #636363;
          font-size: 14px;
          margin-bottom: 12px;
        }
        .input {
          width: 268px;
        }
      }
    }
    .triangle {
      position: absolute;
      top: -30px;
      left: 208px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid #fff;
    }
    .drawer {
      width: calc(100vw - 278px);
      background: #fff;
      box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
      z-index: 99;
      height: 278px;
      position: absolute;
      top: 50px;
    }
  }
}
.overflows {
  vertical-align: bottom;
  display: inline-block;
  overflow: hidden;
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
}
</style>
